uni

您所在的位置:网站首页 canvas 导出图片 去除空白 uni

uni

2024-07-14 07:31| 来源: 网络整理| 查看: 265

使用uni-app做混合APP时,需要用canvas生成海报。遇到问题,第一次保存底部是黑色的,第二次保存出来是全部空白。

因为初次保存图片,背景透明,保存到安卓手机个别型号底部是黑色的,为了解决这个问题,用了一张白色图片,覆盖了整个海报的底色。

            最终效果图          

覆盖了白色底之后,黑色底部这个问题解决了,但是因为图片加载顺序的问题,有时二维码也会被底部白色图片覆盖,导致保存到手机上最后只有一张白色图片。

为了解决这个问题,需要等图片加载完成之后再去进行canvas绘制。

但是 new Image( ) 方法在uni-app上不被支持,无效。所以图片onlad方法也不行。

最后采用了 uni.getImageInfo 方法,获取图片信息,当然该方法肯定是等图片加载完成之后才能获取到图片信息。确保不会导致vanvas在绘制的时候图片之间加载顺序不同而覆盖了其他图片。

但是在使用 uni.getImageInfo 方法时又遇到一个很坑的问题,我的海报上有多张图片,循环中去调用该方法报错了。。。

所以目前只能一个嵌套一个,我的海报中目前有四张图片,所以我嵌套了四遍,效果出来了没错,但是感觉有点不爽,相同代码写了四遍。

uni.getImageInfo({ src: white_img, success(res1) { //填充白色背景图片 context.drawImage(white_img, 0, 0, 300 * that.width_view, 445 * that.width_view); uni.getImageInfo({ src: image, success(res2) { //填充商品图片 context.drawImage(image, 0, 0, 300 * that.width_view, 300 * that.width_view); uni.getImageInfo({ src: ercode_img, success(res3) { //填充二维码 context.drawImage(ercode_img, 16 * that.width_view, 370 * that.width_view, 50 * that.width_view,50 * that.width_view); uni.getImageInfo({ src: jia_img, success(res4) { //填充图标 context.drawImage(jia_img, 234 * that.width_view, 370 * that.width_view, 50 * that.width_view,50 * that.width_view); context.setFontSize(15) context.fillStyle = '#e30b48'; //颜色 context.fillText(old_price, 224 * that.width_view, 340 * that.width_view) context.setFontSize(13) context.fillStyle = '#999999'; //颜色 context.fillText(new_name, 16 * that.width_view, 340 * that.width_view) context.fillText(new_name_one, 16 * that.width_view, 335 * that.width_view) context.fillText(new_name_two, 16 * that.width_view, 355 * that.width_view) context.fillText(des_one, 76 * that.width_view, 388 * that.width_view) context.fillText(des_two, 76 * that.width_view, 412 * that.width_view) context.stroke() context.draw() }, fail() { console.log("fail"); } }); }, fail() { console.log("fail"); } }); }, fail() { console.log("fail"); } }); }, fail() { console.log("fail"); } });



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3